<template>
  <div>
    <el-alert
      v-if="tis"
      :title="tis"
      type="success"
      show-icon
      :closable="false"
    />
    <el-table
      :data="tableData"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange"
      ref="tableRef"
      style="width: 100%"
      fit
      border
      stripe
    >
     
      <tr v-for="(item, index) in this.tableLabel" :key="index">
        <el-table-column
          v-if="item.type === 'checkbox'"
          type="selection" width="45" :reserve-selection="true"
          align="center" 
        />
        <el-table-column v-else-if="item.type === 'on'" label="序号" width="50" align="center" :index="1">
          <template #default="scope">
            {{ (params.pageNum - 1) * params.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'normalTime'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
          :formatter="formatDate"
        />
        <el-table-column
          v-else-if="item.type === 'normalTimes'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
          :formatter="formatTime"
        />
        <el-table-column
          v-else-if="item.type === 'intervalTime'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
           <template slot-scope="scope">
              {{ scope.row.evaluationStartDate | intervalTime }} 至 {{ scope.row.evaluationEndDate | intervalTime }}
           </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'myStoreErrorInfo'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.storeErrorType">{{scope.row.storeErrorType}}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'myStoreCheckInfo'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.storeCheckInfo">{{scope.row.storeCheckInfo}}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'evaluateScore'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <el-tag type="danger">{{scope.row.totalDeduction}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'evaluateSupplierName'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
             <label class="link-box" @click="supplierDetail(scope.row)">{{
              scope.row.supplierName
            }}</label>
          </template>
        </el-table-column>
        
        <el-table-column
          v-else-if="item.type === 'licenseFile'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
        <template slot-scope="scope">
          <div class="duo-file">
            <label
              v-for="(file, index) in parseFiles(scope.row.licenseFile)"
              :key="index"
            >
              <template v-if="isImage(file)">
                <el-image
                  style="width: 40px; height: 40px;margin-right: 6px"
                  :src="file"
                  :preview-src-list="[file]"
                  fit="cover"
                ></el-image>
              </template>
              <template v-else-if="isPDF(file)">
                <a :href="file" target="_blank"
                  ><img
                    style="width: 40px; height: 40px;margin-right: 6px"
                    src="~@/assets/pdf_file.png"
                /></a>
              </template>
            </label>
          </div>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'statusFlag'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.statusFlag === '1'"
              >已通过</el-tag
            >
            <el-tag type="warning" v-if="scope.row.statusFlag === '0'"
              >待审核</el-tag
            >
            <el-tag type="danger" v-if="scope.row.statusFlag === '2'"
              >已驳回</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'pauseType'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pauseType === '1'"
              >人工</el-tag
            >
            <el-tag v-if="scope.row.pauseType === '2'"
              >系统</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'storeStatus'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.storeStatus === '1'"
              >已通过</el-tag
            >
            <el-tag type="warning" v-if="scope.row.storeStatus === '0'"
              >待审核</el-tag
            >
            <el-tag type="danger" v-if="scope.row.storeStatus === '2'"
              >已驳回</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column
          v-else-if="item.type === 'passName'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <label :class="scope.row.totalDeduction == 5 ? 'other-box' :'link-box'" @click="supplierDetail(scope.row)">{{
              scope.row.name
            }}</label>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'passApplyCategoryName'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <label :class="scope.row.totalDeduction == 5 ? 'other-box' :'link-box'" @click="supplierStoreDetail(scope.row)">{{
              scope.row.applyCategoryName
            }}</label>
          </template>
        </el-table-column>

        <el-table-column
          v-else-if="item.type === 'name'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <label class="link-box" @click="supplierDetail(scope.row)">{{
              scope.row.name
            }}</label>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'applyCategoryName'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        >
          <template slot-scope="scope">
            <label class="link-box" @click="supplierStoreDetail(scope.row)">{{
              scope.row.applyCategoryName
            }}</label>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type === 'normal'"
          resizable
          show-overflow-tooltip
          :prop="item.prop"
          :label="item.label"
        ></el-table-column>
      </tr>
      <el-table-column label="操作" fixed="right" :width="operateWin" align="center" v-if="isCopet">
        <template slot-scope="scope">
          <template v-if="scope.row.regApply">
            <el-button
              type="primary"
              v-if="scope.row.statusFlag === '0'"
              size="mini"
              @click="apply(scope.row)"
              >审核</el-button
            >
          </template>
          <template v-if="scope.row.storeApply">
            <el-button
              type="primary"
              v-if="scope.row.storeStatus === '0'"
              size="mini"
              @click="apply(scope.row)"
              >审核</el-button
            >
          </template>
           <template v-if="scope.row.edit">
            <el-button
              type="primary"
              size="mini"
              @click="edit(scope.row)"
              >修改</el-button
            >
          </template>
           <template v-if="scope.row.evaluateEdit">
            <el-button
              type="primary"
              size="mini"
              @click="edit(scope.row)"
              :disabled="scope.row.isShowEdit"
              >修改</el-button
            >
          </template>
          <template v-if="scope.row.evaluateDetail">
            <el-button
              type="primary"
              size="mini"
              @click="evaluateDetail(scope.row)"
              >详情</el-button
            >
          </template>
          <template v-if="scope.row.del">
            <el-button type="danger" size="mini" @click="del(scope.row)"
              >删除</el-button
            >
          </template>
          <template v-if="scope.row.restoreApply">
             <el-button type="danger" size="mini" @click="restore(scope.row)"
              >恢复</el-button
            >
          </template>
           <template v-if="scope.row.setRemark">
             <el-button type="primary" size="mini" @click="setRemark(scope.row)">设置备注</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <el-row>
      <el-pagination
        class="page-footer"
        background
        layout="total,prev,pager,next,sizes,jumper"
        :total="models.total"
        :page-sizes="[10, 20, 30, 40, 50]"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      />
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
import { xlsx } from "@/utils/xlsx";
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableLabel: {
      type: Array,
      default: () => {
        return [];
      }
    },
    models: {
      type: Object,
      default: () => {
        return {};
      }
    },
    operateWin: {
      type: Number,
      default: () => {
        return 150
      }
    }
  },
  data() {
    return {
      params: {
        type: "page",
        pageNum: 1,
        pageSize: 10
      },
      tis: "",
      ids: [],
      isCopet:true
    };
  },
  watch: {
    $route: {
      deep: true,
      immediate:true,
      handler(newRoute, oldRoute) {
        this.isCopet = true
        if (newRoute.name == 'supplierLibPassCode') {
          this.isCopet = false
        }
        if (newRoute.name == 'boardSubCode') {
          this.isCopet = false
        }
      }
    }
  },
  filters: {
    intervalTime(val) {
      if (!val) {
        return;
      }
        return moment(val).format("YYYY-MM-DD");
    },
  },
  methods: {
    clearSelected() {
      this.$refs.tableRef.clearSelection();
      this.ids = [];
      this.tis = "";
    },
    parseFiles(files) {
      return files.split(",");
    },
    isImage(file) {
      return /\.(jpg|jpeg|png|gif|webp)$/i.test(file);
    },
    isPDF(file) {
      return /\.pdf$/i.test(file);
    },
    formatDate(row, column) {
      const date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    },
    formatTime(row, column) {
       const date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    handlePageChange(page) {
      this.params.pageNum = page;
      this.loadList();
    },
    handleSizeChange(page) {
      this.params.pageSize = page;
      this.loadList();
    },
    getRowKeys(row) {
      return row.id;
    },
    handleSelectionChange(val) {
      let ids = [];
      val.forEach(item => {
        ids.push(item);
      });
      this.ids = ids;
      this.tis = "已选择 " + val.length + " 项";
      if (val.length == 0) {
        this.tis = "";
        this.ids = [];
      }
      this.$emit("on-selection-click", this.ids);
    },
    apply(row) {
      this.$emit("on-apply-click", row);
    },
    del(row) {
      this.$emit("on-del-click", row);
    },
    edit(row) {
      this.$emit("on-edit-click", row);
    },
    loadList() {
      this.$emit("on-search-click", this.params);
    },
    supplierDetail(row) {
      this.$emit("on-detail-click", row);
    },
    supplierStoreDetail(row) {
      this.$emit("on-store-detail-click", row);
    },
    evaluateDetail(row) {
      this.$emit("on-evaluateDetail-click", row);
    },
    restore(row) {
      this.$emit("on-restore-click", row);
    },
    setRemark(row) {
      this.$emit("on-remark-click", row);
    },
    exportXlsx(fields,list,manualWidthColumns,fileName) {
      if (list && list.length) {
        // let fields = {
        //   title0: "序号",
        //   title1: "登录账号",
        //   title2: "公司名称",
        //   title3: "统一社会信用代码",
        //   title4: "联系人姓名",
        //   title5: "联系电话",
        //   title6: "注册邮箱",
        //   title7: "营业执照",
        //   title8: "公司地址",
        //   title9: "申请注册时间"
        // };
        // let arry = [];
        // let i = 0;
        // list.forEach(ele => {
        //   i++;
        //   let time = this.formatDate(ele, { property: "createTime" });
        //   arry.push({
        //     title0: i,
        //     title1: ele.account,
        //     title2: ele.name,
        //     title3: ele.licenseNo,
        //     title4: ele.contactPerson,
        //     title5: ele.contactPhone,
        //     title6: ele.email,
        //     title7: ele.licenseFile,
        //     title8: ele.businessAddresss,
        //     title9: time
        //   });
        // });
         xlsx(list, fields, manualWidthColumns,fileName);
      }
    }
  }
};
</script>
<style scoped>
.duo-file {
  display: flex;
}
.psm-duo {
  margin-bottom: 10px;
}
.other-box{
  color: #e6a23c;
  text-decoration: underline;
}
</style>
